<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Component Example: ES Modules</title>
</head>
<body>
    <h1>使用 ES Modules 加载 Web Components</h1>

    <my-button>点击我</my-button>
    <user-card>用户卡片</user-card>

    <script type="module">
        // 导入组件类
        import { MyButton } from './components/my-button.js';
        import { UserCard } from './components/user-card.js';

        // 定义自定义元素
        customElements.define('my-button', MyButton);
        customElements.define('user-card', UserCard);

        // 监听自定义事件
        document.querySelector('my-button').addEventListener('btn-click', (event) => {
            console.log('从 my-button 收到事件:', event.detail.message);
            alert(`收到事件: ${event.detail.message}`);
        });
        document.querySelector('user-card').addEventListener('user-card-click', (event) => {
            console.log('从 user-card 收到事件:', event.detail.message);
            alert(`收到事件: ${event.detail.message}`);
        });
    </script>
</body>
</html>
